<script setup>
import { computed } from 'vue';

// 定义 props
const props = defineProps({
  pageParams: {
    type: Object,
    default: () => ({
      page: 1,
      pageSize: 10,
      total: 0,
    }),
  },
});

// 定义 emits
const emit = defineEmits(['search']);

const handleSizeChange = (size) => {
  props.pageParams.pageSize = size;
  emit('search');
};

const handleCurrentChange = (page) => {
  props.pageParams.page = page;
  emit('search');
};

const totalPage = computed(() => {
  return Math.ceil(props.pageParams.total / props.pageParams.pageSize);
});


</script>

<template>
  <div class="my-container">
    <div class="my-container-form">
      <slot name="form">查询部分</slot>
    </div>
    <div class="my-container-table">
      <slot name="table">表格部分</slot>
    </div>
    <div class="my-container-pagination" v-if="props.pageParams.total > 0">
      <span class="my-container-pagination-text">第{{ props.pageParams.page }}页 共{{ totalPage }}页，共{{
        props.pageParams.total
      }}条</span>
      <el-pagination v-model:current-page="props.pageParams.page" v-model:page-size="props.pageParams.pageSize"
        :page-sizes="[10, 20, 30, 40]" layout="prev, pager, next" :total="props.pageParams.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.my-container {
  height: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-color);
  padding: 12px;
  background-color: #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;

  .my-container-form {

    :deep(.el-form-item) {
      margin-bottom: 12px;

      .el-input,
      .el-select {
        width: 200px;
      }

      .el-date-editor {
        width: 300px;
      }

    }
  }

  .my-container-table {
    flex: 1 0 0;
    min-height: 0;

    // 统一表格样式
    :deep(.el-table) {
      height: 100%;
    }
  }

  .my-container-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    .my-container-pagination-text {
      font-size: 12px;

    }
  }
}
</style>
